<template>
  <div class="info">
    <el-page-header @back="goBack" content="详情页面"></el-page-header>
    <div class="introduct_title">剧情介绍</div>
    <div class="introduction_con">
      {{ film.introduction }}
    </div>
    <div class="comment_on">电影评论</div>

    <div class="comment_on_box">
      <div
        class="comment_item"
        v-for="(item, index) in evaluateList"
        :key="index"
      >
        <img v-if="item.user.avatar !== ''" :src="item.user.avatar" alt="" />
        <img v-else src="../../assets/img/nim.png" alt="" />

        <div class="header-name">
          <div class="anonymous_user" v-if="item.user.nickname === ''">
            匿名用户
          </div>
          <div class="anonymous_user" v-else>
            {{ item.user.nickname }}
          </div>
          <el-rate
            style="padding-top: 7px"
            v-model="item.filmEvaluate.star"
            disabled
            text-color="#ff9900"
            score-template="{value}"
          >
            <!--  disabled取消星选择 -->
          </el-rate>
        </div>

        <div class="comment_info">
          {{ item.filmEvaluate.comment }}
        </div>
        <i>Time:{{ item.filmEvaluate.createAt }}</i>
      </div>
    </div>
  </div>
  <!-- <div class="film_content">
    <router-view />
  </div> -->
</template>
<script>
import { FindFilmEvaluateByFId, FindFilmByFId } from "@/api/film";
export default {
  data() {
    return {
      film: {
        // introduction:
        //   "《小小的愿望》是由田羽生执导，彭昱畅、王大陆、魏大勋主演的喜剧片，于2019年9月12日在中国内地上映。该片改编自韩国电影《伟大的愿望》，讲述了18岁的少年高远因患有绝症即将离世，死党徐浩与张正阳得知此噩耗后，决定帮他圆梦。三兄弟在圆梦过程中，遭遇一系列令人啼笑皆非的经历的故事。",
        // filmId: this.$router.query.fid,
        filmId: this.$route.query.fid,
      },
      evaluateList: [
        // {
        //   nickname: "",
        //   avatar_show: require("../../assets/img/avatar.png"),
        //   star: 3,
        //   comment: "21234",
        //   createAt: "2022-03-24",
        // },
      ],
    };
  },
  mounted() {
    this.commentQery();
    this.queryDetail();
  },
  methods: {
    commentQery() {
      //电影评论接口
      FindFilmEvaluateByFId().then((res) => {
        if (res.code == 200) {
          this.evaluateList = res.data;
        }
      });
    },

    //剧情简介接口
    queryDetail() {
      FindFilmByFId().then((res) => {
        if (res.code == 200) {
          this.film = res.data;
        }
      });
    },
    goBack() {
      this.$router.go(-1); //返回到上一个页面
    },
  },
};
</script>
<style lang="scss">
.info {
  .introduct_title {
    font-weight: bolder;
    font-size: 25px;
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .introduction_con {
    line-height: 30px;
    text-indent: 2.5em;
    // padding-top: 10px;
    padding-bottom: 40px;
  }
  .comment_on {
    font-weight: bolder;
    font-size: 25px;
    padding-top: 10px;
    padding-bottom: 40px;
  }
  .comment_on_box {
    .comment_item {
      padding-bottom: 40px;
      img {
        float: left;
        width: 55px;
        height: 55px;
        border-radius: 40px;
      }
      .header-name {
        color: #000000;
        padding-top: 5px;
        float: left;
        padding-left: 20px;
        font-weight: bolder;
        font-size: 14px;
        letter-spacing: 2px;
        .anonymous_user {
          font-weight: 400;
          color: darkgrey;
          padding-left: 5px;
        }
      }
      .comment_info {
        text-indent: 2.5em;
        line-height: 28px;
        padding-left: 70px;
        padding-top: 80px;
        padding-bottom: 20px;
        color: #91949c;
      }
      i {
        float: right;
        padding-right: 18px;
        color: #91949c;
      }
    }
  }
}
</style>